<template>
	<m-layout class="login " color="#fff" title="注册" barBg="unset" >
		<m-block class="login-box flex-column">
			<view class="from-box ">
				<!-- //验证码登录 -->
				<m-formItem spa="40 34 30">
					<view slot="left" class="form-head">
						<m-icon type="icon-youxiang" wh="42" spa="0 10 0 0"></m-icon>
						<m-text>手机号</m-text>
					</view>
					<m-input border="0" v-model="phone" class="m-input " placeholder="请输入您的手机号" ></m-input>
				</m-formItem>
				<m-formItem spa="10 34 25">
					<view slot="left" class="form-head">
						<m-icon type="icon-youxiang" wh="42" spa="0 10 0 0"></m-icon>
						<m-text>验证码</m-text>
					</view>
					<m-input border="0" v-model="phoneCode" class="m-input " style="padding-top: 15rpx; padding-bottom: 10rpx;   display: flex;align-items: center;"
						placeholder="请输入您的验证码">
						<m-sendCode v-model="phone" slot="right" title="获取"></m-sendCode>
					</m-input>
				</m-formItem>
				<m-formItem spa="10 34 25">
					<view slot="left" class="form-head">
						<m-icon type="icon-suoding" wh="28" spa="0 10 0 0"></m-icon>
						<m-text>密码</m-text>
					</view>
					<m-input border="0" v-model="password" type="password" class="m-input " 
						placeholder="密码必须"></m-input>
				</m-formItem>
				<m-formItem spa="10 34 25">
					<view slot="left" class="form-head">
						<m-icon type="icon-suoding" wh="28" spa="0 10 0 0"></m-icon>
						<m-text>再次确认密码</m-text>
					</view>
					<m-input border="0" v-model="password2" type="password" class="m-input " placeholder="请再次确认密码"></m-input>
				</m-formItem>
				<m-formItem spa="10 34 25">
					<view slot="left" class="form-head">
						<m-icon type="icon-yaoqingma" wh="28" spa="0 10 0 0"></m-icon>
						<m-text>邀请人</m-text>
					</view>
					<m-input border="0" v-model="invcode" class="m-input " placeholder="请输入您的邀请码"></m-input>
				</m-formItem>

				<m-agreement gap="0 24" spa="150 0 10 0" v-model="isAgreement" title="用户协议" code="yhxy" />
				
				<view class="btn-box" style="padding: 0 34rpx;">
					<m-button type="theme" spa="20 0 0" block :loading="isLoading" ftsize="30" weight="bold"
						@click="verify()">注册</m-button>
				</view>
			</view>
		</m-block>
	</m-layout>
</template>

<script>
	import { Regist } from '@/api/Users.js'
	import { enHisNum } from '@/libs/fn/verify.js'
	export default {
		data() {
			return {
				phone: '',
				phoneCode: '',
				isInvcode: false,
				invcode: '',
				password: '',
				
				password2: '',
				isLoading: false,
				isAgreement: true,
				isTab: 1,
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.invcode = this.Cookie.get('Invcode')
			})
			// console.log(this.invcode)
			if (this.Cookie.get('Invcode')) {
				this.isInvcode = true
			}
		},
		methods: {
			verify() {
				if (!this.phone) {
					return this.Toast('请输入您的邮箱')
				}
				if (!this.phoneCode) {
					return this.Toast('请输入您的邮箱')
				}
				if (!this.password) {
					return this.Toast('请输入密码')
				}
				if (!enHisNum(this.password)) {
					this.Toast(this.$t('密码必须'))
					return
				}
				if (this.password != this.password2) {
					return this.Toast('两次密码输入有误')
				}
				// if (!this.isAgreement) {
				// 	return this.Toast('请阅读并同意相关协议')
				// }
				this.Regist()
			},
			async Regist() {
				this.isLoading = true;
				const params = {
					username: this.phone,
					code: this.phoneCode,
					password: this.password,
					invcode: this.invcode
				}
				const success = await Regist(params)
				this.isLoading = false;
				if (success) {
					await  this.sleep(400)
					this.Jump()
				}
			},
		},

	}
</script>

<style lang="scss">
	.login {
		height: 100vh;
		background: url('https://files.hcypai.com/static/imgs/loginbg.png') #856BFF;
		background-size: 750rpx 600rpx;
		background-position: 0 -50rpx;
	}

	.login-box {
		height: 100%;
	}

	.head {
		padding: 30rpx 30rpx;

		view {
			font-size: 50rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #333333;
		}

		view:nth-of-type(1) {
			padding-bottom: 20rpx;
		}
	}

	

	.from-box {
		height: 100%;
		
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding-bottom: 50rpx;

		.form-head {
			display: flex;
			align-items: center;
			padding-bottom: 10rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
		}

		.m-input {
			justify-content: flex-start;
			align-items: center;
		}
	}

	.is-invcode {
		padding: 0 34rpx;
		padding-bottom: 60rpx;

		text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			text-decoration: underline;
			color: #999999;
			text-underline-offset: 6rpx;
		}
	}



	.hint-box {
		padding-top: 30rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.jd {
		text-align: center;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 30rpx;
		margin-bottom: 20rpx;
	}
</style>